<template>
	<div class="steps-container">
		<el-card shadow="hover" header="操作">
			<el-form :inline="true" 
					ref="ruleFormRef"
					:model="ruleForm"
					:rules="rules">
				<el-form-item prop="date">
					<el-date-picker
						v-model="ruleForm.date"
						type="month"
						placeholder="选择查询月份"
					/>
				</el-form-item>
				<el-form-item>
					<el-button @click="readLiqData(ruleFormRef)" size="default" type="primary">
						<SvgIcon name="iconfont icon-step" />
						查询
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button @click="print(ruleFormRef)" size="default" >
						<SvgIcon name="ele-Printer" />
						打印
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button @click="excel(ruleFormRef)" size="default" type="primary">
						<SvgIcon name="fa fa-file-excel-o" />
						导出Excel
					</el-button>
				</el-form-item>
				<!-- <el-form-item>
					<el-button @click="pdf(ruleFormRef)" size="default" type="primary">
						<SvgIcon name="fa fa-file-pdf-o" />
						导出Pdf
					</el-button>
				</el-form-item> -->
				<el-form-item>
					<el-switch
						v-model="ruleForm.tcq"
						size="large"
						inline-prompt
						width="80px"
						style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
						inactive-text="区直"
						active-text="南宁市"
					/>
				</el-form-item>
				<el-form-item>
					<el-switch
						v-model="ruleForm.area"
						size="large"
						inline-prompt
						width="80px"
						style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
						inactive-text="异地"
						active-text="本地"
					/>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="hover" header="报表内容">
			<div ref="printRef">
				<div id="report"></div>
			</div>
			<div id="print"></div>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, ref, computed, nextTick } from 'vue';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import codeHandler from '/@/common/codeHandler';
import { ElMessage, FormRules, FormInstance } from 'element-plus';
import common from '/@/common/common';
import { Session } from '/@/utils/storage';
import get from '/@/utils/get';
import { storeToRefs } from 'pinia';
import printJs from 'print-js';
import liq from '/@/config/image/liq'

export default defineComponent({
	name: 'customUpdate',
	setup() {
		const storesThemeConfig = useThemeConfig();
		const storesTagsViewRoutes = useTagsViewRoutes();
		const { themeConfig } = storeToRefs(storesThemeConfig);
		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
		const state = reactive({
			ruleForm: {
				date: null,
				tcq: true,
				orgname: '',
				orgcode: '',
				area: true
			},
			iframeDom: null as HTMLIFrameElement | null,
			printRef: null as null | HTMLDivElement,
			iframeLoading: true,
			iframeUrl: '',
			rules: reactive<FormRules>({
				date: [
					{ required: true, message: '查询日期必填，不能留空', trigger: 'blur' },
				],
			})
		});
		// 初始化页面加载 loading
		const initIframeLoad = (url: string) => {
			state.iframeUrl = url
			nextTick(() => {
				state.iframeLoading = true;
				const iframe = state.iframeDom;
				if (!iframe) return false;
				iframe.onload = () => {
					state.iframeLoading = false;
				};
			});
		};
		const ruleFormRef = ref<FormInstance>()
		// 下一步点击
		const print = (formEl: FormInstance | undefined) => {
			let clrCenter = codeHandler.codeGetName(codeHandler.AREA, getTCQcode())
			if (state.ruleForm.area) {
				printJs({
					printable: state.printRef,
					type: 'html',
					scanStyles: false,
					maxWidth: 1000,
					style: `@media print{.u_r06{margin-bottom:15px;}}`,
				})
				return
			} else {
				window.open('http://10.98.34.192:7777/report/unieap/pages/report/jsp/show/Print.jsp?reportId=REPORT-C9F3432BFB900001708FD3351F12181E&silent=yes&fastprint=true&printType=lodop'+
				'&orgcode='+Session.get('drugUserInfo').chsCode+
				'&clrCenter='+clrCenter+
				'&shopid='+Session.get('drugUserInfo').shopId+
				'&tcq=1'+
				'&insutype=310'+
				'&areacodeyd='+getTCQcode().substring(0,4)+
				'&areacode='+
				'&begindate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
				'&enddate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
				'&loginname=drugstore'+
				'&token=Neusoft123')
			}
			
		}
		const excel = (formEl: FormInstance | undefined) => {
			let clrCenter = codeHandler.codeGetName(codeHandler.AREA, getTCQcode())
			if (state.ruleForm.area) {
				window.open('http://10.98.34.192:7777/report/Report-ExcelAction.do?reportId=REPORT-C9F3075BB7E00001D89B16B011991353&newReport=true'+
				'&orgcode='+Session.get('drugUserInfo').chsCode+
				'&clrCenter='+clrCenter+
				'&shopid='+Session.get('drugUserInfo').shopId+
				'&tcq=1'+
				'&insutype=310'+
				'&areacodeyd='+
				'&areacode='+getTCQcode().substring(0,4)+
				'&begindate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
				'&enddate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
				'&loginname=drugstore'+
				'&token=Neusoft123')
				return
			} else {
				window.open('http://10.98.34.192:7777/report/Report-ExcelAction.do?reportId=REPORT-C9F3432BFB900001708FD3351F12181E&newReport=true'+
				'&orgcode='+Session.get('drugUserInfo').chsCode+
				'&clrCenter='+clrCenter+
				'&shopid='+Session.get('drugUserInfo').shopId+
				'&tcq=1'+
				'&insutype=310'+
				'&areacodeyd='+getTCQcode().substring(0,4)+
				'&areacode='+
				'&begindate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
				'&enddate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
				'&loginname=drugstore'+
				'&token=Neusoft123')
			}
			
		}
		const pdf = (formEl: FormInstance | undefined) => {
			let clrCenter = codeHandler.codeGetName(codeHandler.AREA, getTCQcode())
			if (state.ruleForm.area) {
				window.open('http://10.98.34.192:7777/report/Report-PdfAction.do?reportId=REPORT-C9F3075BB7E00001D89B16B011991353&newReport=true'+
				'&orgcode='+Session.get('drugUserInfo').chsCode+
				'&clrCenter='+clrCenter+
				'&shopid='+Session.get('drugUserInfo').shopId+
				'&tcq=1'+
				'&insutype=310'+
				'&areacodeyd='+
				'&areacode='+getTCQcode().substring(0,4)+
				'&begindate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
				'&enddate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
				'&loginname=drugstore'+
				'&token=Neusoft123')
				return
			} else {
				window.open('http://10.98.34.192:7777/report/Report-PdfAction.do?reportId=REPORT-C9F3432BFB900001708FD3351F12181E&newReport=true'+
				'&orgcode='+Session.get('drugUserInfo').chsCode+
				'&clrCenter='+clrCenter+
				'&shopid='+Session.get('drugUserInfo').shopId+
				'&tcq=1'+
				'&insutype=310'+
				'&areacodeyd='+getTCQcode().substring(0,4)+
				'&areacode='+
				'&begindate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
				'&enddate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
				'&loginname=drugstore'+
				'&token=Neusoft123')
			}
		}
		const readLiqData = (formEl: FormInstance | undefined) => {
			if (!formEl) return
			document.cookie = "key=value; SameSite=None; Secure"
			state.ruleForm.orgname = Session.get('drugUserInfo').userName
			state.ruleForm.orgcode = Session.get('drugUserInfo').chsCode
			formEl.validate(() => {
				if (state.ruleForm.area) {
					reportLocal(state.ruleForm.orgcode)
				} else {
					reportOutArea(state.ruleForm.orgcode)
				}
			})
		}

		const reportLocal = (chsCode) => {
			let clrCenter = codeHandler.codeGetName(codeHandler.AREA, getTCQcode())
			get.get('http://10.98.34.192:7777/report/Report-ResultAction.do?reportId=REPORT-C9F3075BB7E00001D89B16B011991353'+
			'&orgcode='+chsCode+
			'&clrCenter='+clrCenter+
			'&shopid='+Session.get('drugUserInfo').shopId+
			'&tcq=1'+
			'&insutype=310'+
			'&areacodeyd='+
			'&areacode='+getTCQcode().substring(0,4)+
			'&begindate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
			'&enddate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
			'&loginname=drugstore'+
			'&token=Neusoft123').then(res=>{
				reportHandle(res)
				// @ts-ignore
				//获取本地分割图片
				document.getElementsByClassName('u_r06')[0].childNodes[0].src=liq
			})
		}

		const reportOutArea = (chsCode) => {
			let clrCenter = codeHandler.codeGetName(codeHandler.AREA, getTCQcode())
			get.get('http://10.98.34.192:7777/report/Report-ResultAction.do?reportId=REPORT-C9F3432BFB900001708FD3351F12181E'+
			'&orgcode='+chsCode+
			'&clrCenter='+clrCenter+
			'&shopid='+Session.get('drugUserInfo').shopId+
			'&tcq=1'+
			'&insutype=310'+
			'&areacodeyd='+getTCQcode().substring(0,4)+
			'&areacode='+
			'&begindate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
			'&enddate='+common.gmtToString(state.ruleForm.date, common.YYYYMM)+
			'&loginname=drugstore'+
			'&token=Neusoft123').then(res=>{
				reportHandle(res)
			})
		}

		const reportHandle = (res) => {
			let result = res.data
			while(result.indexOf('<link type="text/css"\n\thref="/report/') != -1){
				result = result.replace('<link type="text/css"\n\thref="/report/','<link type="text/css"\n\thref="../../neusoft/unieap/report/"')
			}
			result = result.replace('<img\n\t\t\tsrc="/report/unieap/pages/report/images/progressbar.gif" />','')
			result = result.replace('<img src="unieap/pages/report/jsp/show/lodop/img/loading.gif"\n\t\t\t\t\tstyle="width: 40px; height: 40px;" />','')
			document.getElementById('report').innerHTML = result
			document.getElementById('processdiv').remove()
		}

		const getTCQcode = () => {
			if(state.ruleForm.tcq){
				return '450199'
			} else {
				return '459900'
			}
		}

		// 设置 iframe 的高度
		const setIframeHeight = computed(() => {
			let { isTagsview } = themeConfig.value;
			if (isTagsViewCurrenFull.value) {
				return `1px`;
			} else {
				if (isTagsview) return `86px`;
				else return `51px`;
			}
		});

		const returnError = (res) => {
			if(res.status != 200){
				ElMessage({
					showClose: true,
					duration: 5000,
					message: '请求失败，错误码：' + res,
					type: 'error',
				})
				return true
			} 
			if(res.data.code != 0) {
				ElMessage({
					showClose: true,
					duration: 5000,
					message: '服务器返回错误：' + res.data.message,
					type: 'error',
				})
				return true
			}
			return false
		}
		return {
			readLiqData,
			print,
			excel,
			pdf,
			ruleFormRef,
			setIframeHeight,
			...toRefs(state),
		};
	}
})
</script>
